<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="element">123123</div>
  <script>
    // WeakMap和map类似，存储键值对

    // 可以用set
    let wMap = new WeakMap();
    let k1 = {obj: 2}
    wMap.set(k1, 222)
    console.log(wMap, 'wMap');
    console.log(wMap.get(k1), 'get k1'); // 222

    // 键可以是数组
    let k2 = [1, 2, 3]
    wMap.set(k2, '333')
    console.log(wMap, 'wMap 22');
    console.log(wMap.get(k2), 'wMap 22');

    // 键不能是字符串
    let k3 = '111'
    let wMap2 = new WeakMap();
    // wMap2.set(k3, 222) // 报错 是invalid的语法
    // Symbol语法可以
    wMap2.set(Symbol(), 20)
    console.log(wMap2, 'wMap2');



    // WeakMap所指向的对象不计入垃圾回收机制, 其他地方对element对象的引用一旦消失，这里保存的key也会消失
    let element = {name: '1'}
    let map2 = new WeakMap()
    map2.set(element, '22')
    element = null
    console.log(map2, 'map2'); // 这里依然没有清除呢？
    



    // 弱引用的只是键，值依然还是强引用
    const wm = new WeakMap()
    let key = {}
    let obj = { foo: 1 }
    wm.set(key, obj)
    obj = null // 取消obj变量对该对象的引用
    console.log(wm.get(key), 'wm.get()'); // 依然能够拿到这个变量的值

    // WeakMap和Map的区别是什么

    /* 下面四个方法都有，其它都没有 */
    console.log(wm.get);
    console.log(wm.set);
    console.log(wm.delete);
    console.log(wm.has);

    /* 其它的呢 */
    console.log(wm.entries); // undefined
    console.log(wm.keys); // undefined
    console.log(wm.values); // undefined
    console.log(wm.size); // undefined
    console.log(wm.forEach); // undefined
    console.log(wm.clear); // undefined

    // 可以通过垃圾回收按钮 查看回收是否消失
  </script>
</body>
</html>